<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>综合表单</title>

<!--分离模式框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css" id="theme" themeColor="blue"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" splitMode="true" href="../../libs/skins/blue/style.css"/>
<link rel="stylesheet" type="text/css" id="customSkin" href="../../system/layout_html/skin/style.css"/>
<!--分离模式框架必需end-->

<!--引入弹窗组件start-->
<script type="text/javascript" src="../../libs/js/popup/drag.js"></script>
<script type="text/javascript" src="../../libs/js/popup/dialog.js"></script>
<!--引入弹窗组件end-->


<!-- 日期选择框start -->
<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期选择框end -->



<!-- 表单验证start -->
<script src="../../libs/js/form/validationRule.js" type="text/javascript"></script>
<script src="../../libs/js/form/validation.js" type="text/javascript"></script>
<!-- 表单验证end -->

</head>
<body>
<div id="scrollContent">	
	<form id="form1"  failAlert="表单填写不正确，请按要求填写！">
	<table class="tableStyle" formMode="line">
		<tr>
			<th colspan="4">表单填写</th>
		</tr>
		<tr>
			<td width="15%">用户名：</td><td><input type="text" class="validate[required,custom[noSpecialCaracters]]" watermark="请输入英文或数字"/><span class="star">*</span></td>
			<td width="15%">姓名：</td><td><input type="text" class="validate[required,custom[chinese],length[0,20]]" watermark="请输入中文"/><span class="star">*</span></td>
		</tr>
		<tr>	
			<td>密码：</td><td><input type="password" id="pwd" class="validate[required,length[6,11],custom[noSpecialCaracters]]"/><span class="star">*</span> </td>
			<td>密码确认：</td><td><input type="password" class="validate[required,confirm[pwd]]"/><span class="star">*</span></td>
		</tr>
		<tr>
			<td>爱好：</td><td>
			<div id="hobby" style="width:120px;"><input type="checkbox" id="checkbox-1" class="validate[minCheckbox[1]] checkbox" name="ck1" value="选项1"/><label for="checkbox-1" class="hand">唱歌</label>
			<input type="checkbox" id="checkbox-2" class="validate[minCheckbox[1]] checkbox" name="ck1" value="选项2" /><label for="checkbox-2" class="hand">跳舞</label> <span class="star">*</span></div>
			</td>
		    <td>性别：</td>
			<td><div style="width:120px;"><input type="radio" class="validate[required] radio" id="radio-1" name="ra" value="radio-1" /><label for="radio-1" class="hand">男</label>
				<input type="radio" id="radio-2" name="ra" class="validate[required] radio" value="radio-2"/><label for="radio-2" class="hand">女</label> <span class="star">*</span></div>
			</td>
		</tr>
		<tr>
			<td>年龄：</td><td><input type="text" watermark="请输入数字" class="validate[required,custom[onlyNumber],length[0,3]]"/><span class="star">*</span></td>
			<td>电子邮件：</td>
			<td>
				<input type="text" class="validate[required,custom[email]]"/><span class="star">*</span>
				
			</td>
		</tr>
		<tr>
			<td>固定电话：</td><td><input type="text" class=" validate[required,custom[telephone]]"/><span class="star">*</span></td>
			<td>英文名：</td><td><input type="text" class="validate[required,custom[onlyLetter]]"/><span class="star">*</span></td>
		</tr>
		
		<tr>
			<td>手机号码：</td><td><input type="text" class=" validate[required,custom[mobilephone]]"/><span class="star">*</span></td>
			<td>邮政编码：</td><td><input type="text" class=" validate[required,custom[zipcode]]"/><span class="star">*</span></td>
		</tr>
		<tr>
			<td>QQ：</td><td><input type="text" class=" validate[required,custom[qq]]"/><span class="star">*</span></td>
			<td>非法字符：</td>
			<td>
			<input type="text" class=" validate[required,custom[illegalLetter]]"/><span class="star">*</span>
			</td>
		</tr>
		<tr>
			<td>IP地址：</td><td><input type="text" class=" validate[required,custom[ip]]"/><span class="star">*</span></td>
			<td>非负整数：</td><td><input type="text" class=" validate[required,custom[onlyNumber]]"/><span class="star">*</span></td>
		</tr>
		<tr>
			<td>正负小数：</td><td><input type="text" class=" validate[required,custom[onlyDecimal]]"/><span class="star">*</span></td>
			<td>正负整数与小数：</td><td><input type="text" class=" validate[required,custom[onlyNumberWide]]"/><span class="star">*</span></td>
		</tr>
		<tr>
			<td>单选下拉框：</td><td><select class="validate[required]" prompt="请选择"  data='{"list":[{"value":"1","key":"北京"},{"value":"2","key":"黑龙江"}]}'></select><span class="star">*</span></td>
			<td>日期选择框：</td><td><input type="text" class="date validate[required,custom[date]]"/><span class="star">*</span></td>
		</tr>
		<tr>
			<td>文本域：</td>
			<td colspan="3">
			<div class="float_left">
			<textarea class="validate[required]" style="width:350px;"></textarea>
			</div>
			<div class="float_left" style="padding:40px 0 0 0;">
				<span class="star float_left">*</span>	
			</div>
			<div class="clear"></div>		
			</td>
		</tr>
		<tr>
			<td colspan="4">
				<input type="button" value=" 提 交 "  onclick="validateForm('#form1');"/>
				<input type="button" value=" 重 置 "/>
			</td>
		</tr>
	 </table>
	</form>
</div>	

<script type="text/javascript">

//手动触发验证，被验证的表单元素是containerId容器里的。 可以验证整个表单，也可以验证部分表单。
	function validateForm(containerId){
	    var valid = $(containerId).validationEngine({returnIsValid: true});
		if(valid == true){
			top.Dialog.alert('进行提交处理');
		}else{
		    top.Dialog.alert('表单填写不正确，请按要求填写！');
		} 
	} 	
</script>
</body>
</html>